<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>携程在手，说走就走</title>
	<!-- 移动端 必须添加约束视口宽度-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />
	<!-- 清除默认样式 -->
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<!-- 引入原子类 -->
	<link rel="stylesheet" type="text/css" href="">
	<!-- 公共样式 -->
	<link rel="stylesheet" type="text/css" href="">
	<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
	<!-- 头部 -->
	<div class="header">
		<!-- 比  百分数 标准流-->
		<div class="search">
			<span>搜索：目的地/酒店/景点/航班号</span>
		</div>
		<!-- 固  像素  绝对定位 -->
		<a href="" class="login">我的</a>
	</div>
	<div class="banner">
		<div class="pic">
			<img src="images/banner.png" alt="">
		</div>
		<div class="circles">
			<ol>
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>
	</div>
	<!-- 主导航 -->
	<div class="main-nav">
		<div class="row">
			<ul>
				<li><a href="">酒店</a></li>
				<li><a href="">海外酒店</a></li>
				<li><a href="">团购</a></li>
				<li><a href="">特价酒店</a></li>
				<li><a href="">民宿·客栈</a></li>
			</ul>
		</div>
		<div class="row">
			<ul>
				<li><a href="">机票</a></li>
				<li><a href="">海外酒店</a></li>
				<li><a href="">团购</a></li>
				<li><a href="">特价酒店</a></li>
				<li><a href="">民宿·客栈</a></li>
			</ul>
		</div>
		<div class="row">
			<ul>
				<li><a href="">旅游</a></li>
				<li><a href="">海外酒店</a></li>
				<li><a href="">团购</a></li>
				<li><a href="">特价酒店</a></li>
				<li><a href="">民宿·客栈</a></li>
			</ul>
		</div>
		<div class="row">
			<ul>
				<li><a href="">景点·玩乐</a></li>
				<li><a href="">美食林</a></li>
				<li><a href="">团购</a></li>
				<li><a href="">特价酒店</a></li>
				<li><a href="">电话卡</a></li>
				<li><a href="">民宿·客栈</a></li>
			</ul>
		</div>
	</div>
	<!-- 侧导航 -->
	<div class="sub-nav">
		<ul>
			<li><a href="">自由行</a></li>
			<li><a href="">微领队</a></li>
			<li><a href="">一日游</a></li>
			<li><a href="">高端游</a></li>
			<li><a href="">自由行</a></li>
			<li><a href="">微领队</a></li>
			<li><a href="">一日游</a></li>
			<li><a href="">高端游</a></li>
			<li><a href="">自由行</a></li>
			<li><a href="">微领队</a></li>
			<li><a href="">一日游</a></li>
			<li><a href="">高端游</a></li>
		</ul>
	</div>
	<!-- 特卖汇 -->
	<div class="sale">
		<!-- 标题 -->
		<div class="title">
			<!-- 不用不能看到文字 -->
			<h3>特卖汇</h3>
			<a href="" class="hongbao">领红包再下单</a>
		</div>
		<!-- 内容区域 -->
		<div class="content">
			<!-- 左侧爆款 -->
			<div class="hot">
				<div class="pic">
					<img src="images/pic.jpg" alt="">
					<!-- 特殊形状 -->
					<span>爆款</span>
				</div>
				<div class="txt">
					<p class="info">云南昆明+大理+丽江6日5晚跟团游(4钻)·【携程贵宾独立发团】金秋错峰悦心游+雪山冰川公园登顶+洱海大游船+花海畅游.海边骑行+高尔夫挥杆体验+世界自然遗产石林+魅力双廊+赏丽江风情表演+温泉SPA</p>
					<p class="price"><b>¥</b>1499<i>起</i><span>2.7折</span></p>
				</div>
			</div>
			<!-- 右侧特价 -->
			<div class="tejia">
				<div class="top">
					<p>千款特价</p>
					<p>走过路过不错过</p>
				</div>
				<div class="bottom">
					<div class="jingxuan">
						<p>境外精选</p>
						<p><span>百元</span>出境游</p>
					</div>
					<div class="wanle">
						<p>周边玩乐</p>
						<p><span>百元</span>出境游</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>